import * as React from "react";
import {Suspense} from "react";
import {HashRouter as Router, Route, Switch, Redirect} from "react-router-dom";
import loadable from '@loadable/component'

export interface PageProps {
    path: string
}

export interface PageState {
    text: string
}

const Login = () => {
    return <h1>'this is Login.'</h1>
};

const App = loadable(() => import('./App'));
const NotFound = loadable(() => import('./NotFound'));

export class PageRouter extends React.Component<PageProps, PageState, {}> {
    constructor(props: PageProps, state: PageState) {
        super(props, state)
    }

    componentDidMount(): void {
        console.log('call componentDidMount in PageRouter.')
    }

    render() {
        return (
            <Router>
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        {/*<h1>this is page {this.props.path}.</h1>*/}
                        <Route path="/app" component={App}/>
                        <Route path="/404" component={NotFound}/>
                        <Route path="/login" component={Login}/>
                        <Route component={NotFound}/>
                    </Switch>
                </Suspense>
            </Router>
        );
    }
}